<template>
  <div>
    <div style="position:absolute;top:2.9%;left:16%;width: 7%;">
      <el-image :src="global.recommendImg+'/static/img/icon.jpg'" />
    </div>
    <div style="position:absolute;left:23%;top:5%;width: 60%;font-style:oblique;color: rgba(11,174,245,0.99)">
      <h1>欢迎来到贴乎PLAYER</h1>
    </div>
    <div class="imgDiv">
      <div style="margin-top:40px;margin-left: 10%;width: 700px">
        <el-carousel height="420px">
          <el-carousel-item v-for="item in slideshow" :key="item">
            <el-image :src="item" style="height: 100%;width: 100%"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="position:absolute;bottom: -11%;left: 35%;">
        <h4>建议反馈邮箱:2630691549@qq.com | <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery">湘ICP备2022001738号-1</a></h4>
      </div>
    </div>
      <div class="loginDiv">
        <div style="margin: 10px;">
          <div style="margin-top: 28px;">
            <h3>贴乎登录</h3>
          </div>
          <el-form :model="ruleForm2" status-icon :rules="rules" ref="loginFrom" class="demo-ruleForm">
            <el-form-item prop="usersName" style="margin-top: 28px">
              <el-input type="text" v-model="ruleForm2.usersName" placeholder="用户名" />
            </el-form-item>
            <el-form-item prop="usersPassword" style="margin-top: 28px">
              <el-input type="password" v-model="ruleForm2.usersPassword" placeholder="密码" />
            </el-form-item>
            <div style="margin-top: 28px">
              <router-link to="/register">
                <el-link :underline="false">用户注册</el-link>
              </router-link>
            </div>
            <el-form-item style="margin-top: 28px">
              <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
          </el-form>
          </div>
      </div>
  </div>
</template>
<script>
import request from "../utils/request";
import videoPlay from "./indexPage/video/videoPlay";
export default {
  components:{videoPlay},
  data(){
    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入名字'));
      }else {
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }else {
        callback();
      }
    };
    return {
      dialogFormVisible:false,
      logining: false,
      ruleForm2: {},
      checked: false,
      cutState:0,
      rules: {
        usersName: [
          { validator: validateName, trigger: 'blur' }
        ],
        usersPassword: [
          { validator: validatePass, trigger: 'blur' }
        ],
      }
    }
  },
  computed:{
    slideshow:function (){
      if (this.global.recommendImg === "http://localhost:8080"){
        return ["http://localhost:8080/static/img/asdasdasdqeqweqweqweqwe.jpg","http://localhost:8080/static/img/EG.jpg"]
      }else if (this.global.recommendImg === "https://www.tiehuplayer.xyz"){
        return ["https://www.tiehuplayer.xyz/static/img/asdasdasdqeqweqweqweqwe.jpg","https://www.tiehuplayer.xyz/static/img/EG.jpg"]
      }

    }
  },
  methods: {
    handleSubmit(){
      this.$refs['loginFrom'].validate((valid) => {
          if (valid) {
            let Ip=returnCitySN['cip']
            let cityname=returnCitySN['cname']
            this.ruleForm2.usersIp=Ip;
            this.ruleForm2.usersLocation=cityname;
              /*此时vue的端口为8080*/
                request.post('/users/login',this.ruleForm2).then(res => {
                  if (res.code === "200"){
                    localStorage.setItem("userData",JSON.stringify(res.data))
                    this.$router.push('/');
                    this.$message({
                      type:"success",
                      message:"成功登录",
                      offset:75
                    })
                  }else {
                    this.$message.error(res.msg)
                  }
                })
        } else {
          return false;
        }
      });
      }
    },
  mounted() {
    document.title="技术新生代 - 贴乎";
    this.cutState=0;
  }
}
</script>

<style scoped>
.imgDiv{
  position: absolute;top: 16%;
  width:100%;
  height: 500px;
  background-image: linear-gradient(to bottom right, #95d1d5, #3F5EFB);
}
.loginDiv{
  background-color: #ffffff;
  position: absolute;top: 21%;right: 8%;
  width: 400px;
  height: 420px;
  border-radius: 5px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  z-index: 100;
}
a{
  color: rgba(85, 103, 108, 0.99);
  text-decoration: none;
}
</style>
